<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
    <!--    <meta http-equiv=\"content-type\" content=\"text/html; charset=UTF-8\">
 -->
    <meta http-equiv="Content-Type" content="text/html; charset=">
    <!-- Bootstrap core CSS -->
    <link href="dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="dist/css/demo.css">
    <link rel="stylesheet" type="text/css" href="dist/css/uploader.css">
    <!-- <script language="JavaScript" type="text/javascript" src="dist/js/jquery-3.1.1.js"></script> -->
    <title>index</title>
</head>

<body role="document">
    <div class="container dome-wrapper">
        <div class="page-header">
            <h1><small>Drag and Drop files</small></h1>
        </div>
        <div class="row demo-columns">
            <div class="col-md-6">
                <!-- Drag Zone -->
                <div class="uploader" id="drag-and-drop-zone">
                    <div>Drag &amp; Drop File Here</div>
                    <div class="or">-or-</div>
                    <div class="browser">
                        <label>
                            <span>Click to open the file Browser</span>
                            <input type="file" name="file[]" multiple="multiple" title="Click to and Files">
                        </label>
                    </div>
                </div>
            </div>
            <!-- uploading Zone -->
            <div class="col-md-6">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">Uploads</h3>
                    </div>
                    <div class="panel-body demo-panel-files" id="demo-files">
                        <span class="demo-note">No Files have been selected/droped yet...</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script type="text/javascript" src="dist/js/demo.min.js"></script>
    <script type="text/javascript" src="dist/js/dmuploader.min.js"></script>
    <script type="text/javascript">
    $('#drag-and-drop-zone').dmUploader({
        url: 'updateFilerequestmothed',
        dataType: 'json',
        allowedTypes: '*',
        /*extFilter: 'jpg;png;gif', all*/
        onInit: function() {
            $.danidemo.addLog('#demo-debug', 'default', 'Plugin initialized correctly');
        },
        onBeforeUpload: function(id) {
            $.danidemo.addLog('#demo-debug', 'default', 'Starting the upload of #' + id);

            $.danidemo.updateFileStatus(id, 'default', 'Uploading...');
        },
        onNewFile: function(id, file) {
            $.danidemo.addFile('#demo-files', id, file);
        },
        onComplete: function() {
            $.danidemo.addLog('#demo-debug', 'default', 'All pending tranfers completed');
        },
        onUploadProgress: function(id, percent) {
            var percentStr = percent + '%';

            $.danidemo.updateFileProgress(id, percentStr);
        },
        onUploadSuccess: function(id, data) {
            $.danidemo.addLog('#demo-debug', 'success', 'Upload of file #' + id + ' completed');

            $.danidemo.addLog('#demo-debug', 'info', 'Server Response for file #' + id + ': ' + JSON.stringify(data));

            $.danidemo.updateFileStatus(id, 'success', 'Upload Complete');

            $.danidemo.updateFileProgress(id, '100%');
        },
        onUploadError: function(id, message) {
            $.danidemo.updateFileStatus(id, 'error', message);

            $.danidemo.addLog('#demo-debug', 'error', 'Failed to Upload file #' + id + ': ' + message);
        },
        onFileTypeError: function(file) {
            $.danidemo.addLog('#demo-debug', 'error', 'File \'' + file.name + '\' cannot be added ');
        },
        onFileSizeError: function(file) {
            $.danidemo.addLog('#demo-debug', 'error', 'File \'' + file.name + '\' cannot be added: size excess limit');
        },
        /*onFileExtError: function(file){
          $.danidemo.addLog('#demo-debug', 'error', 'File \'' + file.name + '\' has a Not Allowed Extension');
        },*/
        onFallbackMode: function(message) {
            $.danidemo.addLog('#demo-debug', 'info', 'Browser not supported(do something else here!): ' + message);
        }
    });
    </script>
</body>

</html>
